<!--选择商品详情页-->
<div class="product-tabs js-product-tabs">
    <ul class="clearfix">
        <li class="col-md-4 btn curs">Customize</li>
        <li class="col-md-4 btn">Additional options</li>
        <li class="col-md-4 btn">Jacket monogram</li>
    </ul>
    <hr/>
</div>

<div class="product-detail-select">
    <div class="item">
        <div class="clearfix">
            <div class="col-md-3"><img class="preview-img" src="/data/2014/09/04/540835c1cec40.jpg" alt=""/></div>
            <table class="col-md-9">
                <tr>
                    <td>Lapel:<input type="text"/></td>
                    <td>Button:<input type="text"/></td>
                    <td>Back Vent:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Pockets:<input type="text"/></td>
                    <td>Breast Pocket:<input type="text"/></td>
                    <td>Facing:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Lining:<input type="text"/></td>
                    <td>Lining Color:<input type="text"/></td>
                    <td>Vest Lapel:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Vest Button:<input type="text"/></td>
                    <td>Vest Lining:<input type="text"/></td>
                    <td>Pant Pleats:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Waist Closure:<input type="text"/></td>
                    <td>Back Pocket:<input type="text"/></td>
                </tr>
            </table>
        </div>
        <hr/>
        <div>
            <h4 class="align-center">Lining Color</h4>
        </div>
    </div>
    <div class="item" hidden>
        <div class="clearfix">
            <div class="col-md-3"><img class="preview-img" src="/data/2014/09/04/540835c1cec40.jpg" alt=""/></div>
            <table class="col-md-9">
                <tr>
                    <td>Pen Pocket:<input type="text"/></td>
                    <td>Boutonniere:<input type="text"/></td>
                    <td>Split Side Seam:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Waist Pocket:<input type="text"/></td>
                    <td>Real Sleeve Slit:<input type="text"/></td>
                    <td>Pic Stitch:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Intelligent Pocket & Headphone Pocket:<input type="text"/></td>
                    <td>Pant Cuff:<input type="text"/></td>
                    <td>Belt Loops:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Adjustable Tab:<input type="text"/></td>
                    <td>Suspender Button:<input type="text"/></td>
                    <td>Elbow Patch:<input type="text"/></td>
                </tr>
                <tr>
                    <td>Buttonhole Color & Button Thread Color:<input type="text"/></td>
                    <td>Collar Under-Lining Color:<input type="text"/></td>
                </tr>
            </table>
        </div>
        <hr/>
        <div>
            <h4 class="align-center">Pen pocket</h4>
        </div>
    </div>
    <div class="item" hidden>
        <div class="clearfix">
            <div class="col-md-3"><img class="preview-img" src="/data/2014/09/04/540835c1cec40.jpg" alt=""/></div>
            <table class="col-md-9">
                <tr>
                    <td>Text:<input type="text"/></td>
                    <td>Font:<input type="text"/></td>
                    <td>Font color:<input type="text"/></td>
                </tr>
                <tr>
                    <td><input type="text" placeholder="max 20 characters"/></td>
                </tr>
            </table>
        </div>
        <hr/>
        <div>
            <h4 class="align-center">Line1 of Monogram</h4>
            <p>Preview</p>
        </div>

    </div>
</div>
<script>
    $(function(){
        $(".js-product-tabs").on("click", "li", function () {
            var _self = $(this),
                _index = _self.index();
            _self.addClass("curs").siblings().removeClass("curs");
            $(".product-detail-select").find(".item").eq(_index).show().siblings().hide();
        });
    });
</script>